<template>
  <div class="focus-person-detail">
    <xdh-panel title="人员详情" icon="el-icon-menu">
      <template slot="tool">
        <el-button type="default" size="small" @click="goBack()" class="btn">返回</el-button>
        <el-button type="default" size="small" @click="handleEdit()" class="btn" v-if="mode === 'edit'">编辑人员</el-button>
        <el-button type="default" size="small" @click="handleFocus()" class="btn" v-if="mode === 'focus'">关注</el-button>
      </template>
      <div class="desc-con">
        <el-form :data="model">
          <el-row style="text-align:center;">
            <h4>
              基本信息
            </h4>
          </el-row>
          <el-row>
            <el-col :span="18">
              <el-row>
                <el-col :span="8">
                  <el-form-item label="姓名:" prop="name">
                    {{model.name}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="性别:" prop="sex">
                    {{model.csex}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="国籍:" prop="country">
                    {{model.country}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="护照号:" prop="passno">
                    {{model.passno}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="出生日期:" prop="birthday">
                    {{model.birthday}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="是否在厦门:" prop="area">
                    {{model.area}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="8">
                  <el-form-item label="分组:" prop="groupName">
                    {{model.groupName}}
                  </el-form-item>

                </el-col>
                <el-col :span="8">
                  <el-form-item label="级别:" prop="level">
                    {{model.levelName}}
                  </el-form-item>
                </el-col>
                <el-col :span="8">
                  <el-form-item label="管辖单位:" prop="org">
                    {{model.org}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="户籍详细地址:" prop="addr">
                    {{model.addr}}
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row>
                <el-col :span="24">
                  <el-form-item label="居住地详细地址:" prop="live">
                    {{model.live}}
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
            <el-col :span="6" style="text-align:center;">
              <img class="head-image" :src="'/static/img/head.png'" />
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:" prop="remark">
                {{model.remark}}
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </xdh-panel>
    <xdh-list-panel v-if="mode === 'edit'" :load="loadData" :fit="mPanelFit" :state="state" ref="listPanel" :title="'最新消息'" :sizes="pageSizes" :size="20">
      <template slot="tool">
        <el-input placeholder="请输入内容" size="mini" v-model="input5" class="input-with-select">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </template>
      <template slot-scope="scope">
        <news-item v-for="(item, idx) in state.list" :item="item" :index="(pageInfo.page - 1)* pageInfo.limit + idx+1" :class="{odd: idx%2===1}" :key="idx"></news-item>
      </template>
    </xdh-list-panel>
    <edit-person :mode="'update'" :title="'编辑人员'" :model="model" :closed.sync="addPersonClosed" :rules="rules">
    </edit-person>
    <option-select-dialog ref="groupOption"></option-select-dialog>
  </div>
</template>
<script>
  import XdhPanel from '@/widgets/xdh-panel';
  import XdhListPanel from '@/widgets/xdh-list-panel';
  import NewsItem from '@/components/focusManage/news-item';
  import EditPerson from '@/components/focusManage/editPerson';
  import optionSelectDialog from '@/components/focusManage/optionSelectDialog';

  import personMixin from '@/base/mixin/person';
  import focusMixin from '@/base/mixin/focus';
  export default {
    mixins: [personMixin, focusMixin],
    components: {
      XdhPanel,
      XdhListPanel,
      NewsItem,
      EditPerson,
      optionSelectDialog
    },
    data() {
      return {
        rules: {},
        addPersonClosed: true,
        model: {
          name: '',
          csex: '',
          country: '',
          passno: '',
          birthday: '',
          area: '',
          group: '',
          groupName: '',
          level: '',
          levelName: '',
          org: '',
          addr: '',
          live: '',
          remark: ''
        },
        pageSizes: [10, 20, 50, 100, 500],
        state: {
          total: 0,
          list: []
        },
        pageInfo: {
          page: 1,
          limit: 10
        }
      };
    },
    computed: {
      mode() {
        return this.$route.params.mode;
      }
    },
    methods: {
      handleFocus() {
        this.$refs.groupOption
          .getOption()
          .then(res => {
            // focus 操作
            this.focusPerson({
              id: this.model.id,
              groupId: res.group
            }).then(res => {
              if (res) {
                this.$message({
                  type: 'success',
                  message: '关注成功'
                });
              }
            });
          })
          .catch(e => {});
      },
      goBack() {
        this.$router.go(-1);
      },
      handleEdit() {
        this.addPersonClosed = false;
      },
      loadData(page, limit) {
        this.pageInfo.page = page;
        this.pageInfo.limit = limit;
        let query = Object.assign(
          {},
          {
            page: page,
            limit: limit
          }
        );
        return this.fetchPerson(query).then(res => {
          this.state = res;
          if (this.pageSizes[this.pageSizes.length - 1] < this.state.total) {
            this.pageSizes.push(this.state.total);
          }
        });
      }
    },
    created() {
      this.getPerson(this.$route.params.id, {}).then(res => {
        this.model = res;
      });
    }
  };
</script>
<style type="text/scss" lang="scss" scoped>
  .desc-con {
    padding: 0 20px;
    .el-form-item {
      margin-bottom: 10px;
    }
  }
</style>

<style  type="text/scss" lang="scss">
  .focus-person-detail {
    .btn {
      float: right;
      margin-left: 10px;
      margin-top: 3px;
    }
  }
  .desc-con {
    .el-form-item__label {
      font-size: 16px;
    }
    .el-form-item__content {
      font-size: 16px;
    }
  }
</style>